
<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions"> 
            <swiper-slide>
                <img class="w-100 bg-black" src="@/assets/logo.png" alt="" sizes="" srcset="" />
            </swiper-slide>
            <swiper-slide>
                <img class="w-100 bg-black" src="@/assets/logo.png" alt="" sizes="" srcset="" />
            </swiper-slide>
           <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
        </swiper>
        <!-- end of swiper -->
        <div class="nav-icon bg-white mt-3 pt-3 text-center text-dark-1">
            <div class=" d-flex flex-wrap">
                <div class="nav-item mb-3" v-for="n in 10" :key='n'>
                    <i  :style="{backgroundImage: 'url('+require('../assets/images/icon.png')+')' }" class="sprite sprite-news" ></i>
                    <div class="py-2">爆料站</div>
                </div>
            </div>
            <div class="py2 bg-light fs-sm">
                <i  :style="{backgroundImage: 'url('+require('../assets/images/icon.png')+')' }" class="sprite sprite-arrow mr-1"></i>
                <span>收起</span>
            </div>
        </div>
        <!-- end of nav icons -->
        <!-- 自定义组件 -->
       <!-- <m-card title="新闻资讯" icon1='shangwutubiao-' icon2='shenglvehao'>
             <div class="nav jc-between">
                    <div class="nav-item " :class="{active:false}">
                        <div class="nav-link ">热门</div>
                    </div>
              </div>-->
            <!-- 滑动 -->
              <!-- <div class="pt-3">
                    <swiper >
                        <swiper-slide v-for="m in 5" :key="m">
                            <div class="py-2" v-for="n in 5" :key="n">
                                <span>新闻</span>
                                <span>|</span>
                                <span>夏日全新版本“小梦奇星之队”即将上线</span>
                                <span>06/02</span>
                            </div>
                        </swiper-slide>
                    </swiper>
               </div>
       </m-card> -->

       <m-list-card  title="新闻资讯" icon1='shangwutubiao-' :categories='newsCats' >
           <!-- V2.6语法 绑定了#子组件slot名字 作用域插槽 在父组件直接拿到了子组件的循环中的某一个category -->
           <!-- 当父组件需要决定子组件的内容如何显示 -->
           <template #items="{category}">
             <router-link tag="div" :to='`/article/${news._id}`' class="py-2 fs-lg d-flex" v-for="(news,i) of category.newsList" :key="i">
                <span class="text-info">[{{news.categoryName}}]</span>
                <span class="px-2">|</span>
                <span class="flex-1 text-dark text-ellipsis">{{news.title}}</span>
                <span class="text-gray-1">{{news.createdAt|date}}</span>
             </router-link >
           </template>
       </m-list-card>

        <m-list-card   title="英雄列表" icon1='yingxiongxiangqing' :categories='heroCats'>
            <template #items='{category}'>
                <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
                    <router-link tag="div" :to="`/hero/${hero._id}`" class="p-2  text-center" v-for='(hero,i) in category.heroList' :key="i" style="width:20%">
                              <img :src="hero.avatar" class='w-100' alt='英雄头像' :title="`${hero.name}`" />
                              <div>{{hero.name}}</div>
                    </router-link>
                </div>
            </template>
        </m-list-card >






        <m-card title="精彩视频" icon1='shangwutubiao-' icon2='shenglvehao'>  </m-card>   
        <m-card title="图文攻略" icon1='shangwutubiao-' icon2='shenglvehao'>  </m-card>   
    </div>
</template>
 
 <script>
 import dayjs from 'dayjs'
 export default {
     filters:{
         date(val){
             return dayjs(val).format('MM/DD')
         }
     },
     data(){
       return {
        newsCats:[ ],
        heroCats:[ ],
        swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
         }   
        }
      } 
     },
     methods:{
         async fetchNewsCats(){
            const res =  await this.$http.get('news/list')
            this.newsCats = res.data
         },
         async fetchHeroesCats(){
            const res =  await this.$http.get('heroes/list')
            this.heroCats = res.data
         }
     },
     created(){
         this.fetchNewsCats()
         this. fetchHeroesCats()
     }
 }
 </script>

 <style lang="scss" >
 @import '../assets/iconFont/iconfont.css';
 @import '../assets/scss/variables';
 .pagination-home{
     .swiper-pagination-bullet{
         z-index: 999;
         opacity: 1;
         width: 0.7692rem;
         height: 0.7692rem;
         border-radius: 0.1538rem;
         background-color:map-get($colors,'primary');
         &.swiper-pagination-bullet-active{
             background-color: map-get($colors,'info');
         }
     }
 }

.nav-icon{
    border-top:1px solid $border-color ;
    border-bottom:1px solid $border-color ;
    .nav-item{
        width:25%;
        border-right: 1px solid $border-color;
        &:nth-child(4n){
            border-right: none;
        }
    }
}

 </style>